<template>
	<div>
		<Row style="text-align: left;margin-top: 41px;">
			<Col span="12" style="text-align: left;">
			<span style="border-left: 5px solid #517EDB;font-size: 16px;"></span>
			<span style="font-size: 16px;font-weight: 800;margin-left: 41px;">分班信息</span>
			</Col>
		</Row>
		<div v-if="this.classtype==1?true:false">

			<Row style="padding: 45px;">
				<RadioGroup style="float: left;" v-model="classtype" type="button" @on-change="classtypeselect">
					<Radio v-for="item in classtypeList" :key="item.value" :label="item.value">{{item.label}}</Radio>
				</RadioGroup>
			</Row>

			<Row style="margin-top: 20px;margin-bottom:20px;text-align: left;padding: 0px 40px 0px 45px;">
				<Col span="6" style="width: 20%;">
				<span>年&nbsp;&nbsp;&nbsp;&nbsp;级：</span>
				<Select v-model="fencengSelect" @on-change="fencengselectChange" style="width: 100px;text-align: center;">
					<Option v-for="item in fencengList" :value="item.value" :key="item.value">{{item.label}}</Option>
				</Select>
				</Col>
				<Col span="6" style="width: 20%;">
				<span>行政班级：</span>
				<Select v-model="xzclassSelect" @on-change="xzclassSelectChange" style="width: 100px;text-align: center;">
					<Option v-for="item in xzclassSelectList" :value="item.value" :key="item.value">{{item.label}}</Option>
				</Select>
				</Col>
				<div style="display: inline-block;float: right;">
					<Tooltip content="导出" theme="light">
						<Button @click="daochu" icon="iconfont alicon-daochu"></Button>
					</Tooltip>
				</div>
			</Row>
			<div style="min-height: 300px; padding-bottom:20px ;border-bottom: 1px solid #CCCCCC;">
				<Row style="margin:0 auto;margin:20px 45px 5px 45px;color: #666666;border-radius: 10px; background-color: #f0f8ff;padding: 10px 0;">
					<Col span="3" style="text-align: center;width: 8%;">
					<span style="font-size: 16px;">校区</span>
					</Col>
					<Col span="4" style="text-align: center;width: 8%;">
					<span style="font-size: 16px;">行政班</span>
					</Col>
					<Col span="3" style="text-align: center;width: 8%;">
					<span style="font-size: 16px;">姓名</span>
					</Col>
					<Col span="3" style="text-align: center;width: 8%;">
					<span style="font-size: 16px;">学号</span>
					</Col>
					<Col span="3" style="text-align: center;width: 8%;">
					<span style="font-size: 16px;">性别</span>
					</Col>
					<Col span="4" style="text-align: center;width: 60%;">
					<span style="font-size: 16px;">分班结果</span>
					</Col>

				</Row>
				<Row v-for="item in xzList" :key="item.xzListId" style="margin:0 auto;margin:20px 45px 5px 45px;">
					<Col span="3" style="text-align: center;width: 8%;">
					<span style="font-size: 16px;">{{item.school}}&nbsp;</span>
					</Col>
					<Col span="4" style="text-align: center;width: 8%;">
					<span style="font-size: 16px;">{{item.xzclassroom}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;width: 8%;">
					<span style="font-size: 16px;">{{item.name}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;width: 8%;">
					<span style="font-size: 16px;">{{item.num}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;width: 8%;">
					<span style="font-size: 16px;">{{item.sex}}&nbsp;</span>
					</Col>
					<Col span="4" style="text-align: center;width: 60%;">
					<Col span="4" style="text-align: center;width: 11%;">
					<span>语文|{{item.chiclass}}</span>
					</Col>
					<Col span="4" style="text-align: center;width: 11%;">
					<span>数学|{{item.mathclass}}</span>
					</Col>
					<Col span="4" style="text-align: center;width: 11%;">
					<span>英语|{{item.engclass}}</span>
					</Col>
					<Col span="4" style="text-align: center;width: 11%;">
					<span>物理|{{item.wuliclass}}</span>
					</Col>
					<Col span="4" style="text-align: center;width: 11%;">
					<span>化学|{{item.huaxueclass}}</span>
					</Col>
					<Col span="4" style="text-align: center;width: 11%;">
					<span>生物|{{item.shengwuclass}}</span>
					</Col>
					<Col span="4" style="text-align: center;width: 11%;">
					<span>政治|{{item.zhengzhiclass}}</span>
					</Col>
					<Col span="4" style="text-align: center;width: 11%;">
					<span>历史|{{item.lishiclass}}</span>
					</Col>
					<Col span="4" style="text-align: center;width: 11%;">
					<span>地理|{{item.diliclass}}</span>
					</Col>
					</Col>

					</Col>
				</Row>
			</div>
			<div style="text-align: center;display: block;margin: 0 45px;">
				<Page :page-size="pageSize" style="display: inline-block;margin: 15px auto; width: 80%; text-align: right;" :current="current" :total="recordCount" @on-change="pageChange" />
				<span style="display: inline-block;float: left;line-height: 32px; padding: 15px 0 15px 45px;">共有{{recordCount}}条记录</span>
			</div>
		</div>
		<div v-if="this.classtype==2?true:false">
			<Row style="padding: 45px;">
				<RadioGroup style="float: left;" v-model="classtype" type="button" @on-change="classtypeselect">
					<Radio v-for="item in classtypeList" :key="item.value" :label="item.value">{{item.label}}</Radio>
				</RadioGroup>
			</Row>
			<Row style="margin-top: 20px;margin-bottom:20px;text-align: left;padding: 0px 40px 0px 45px;">
				<Col span="6" style="width: 20%;">
				<span>年&nbsp;&nbsp;&nbsp;&nbsp;级：</span>
				<Select v-model="fencengSelect" @on-change="fencengselectChange" style="width: 100px;text-align: center;">
					<Option v-for="item in fencengList" :value="item.value" :key="item.value">{{item.label}}</Option>
				</Select>
				</Col>
				<Col span="6" style="width: 20%;">
				<span>教学班级：</span>
				<Select v-model="jiaoxueclassSelect" @on-change="jiaoxueclassSelectChange" style="width: 100px;text-align: center;">
					<Option v-for="item in jiaoxueclassSelectList" :value="item.value1" :key="item.value1">{{item.label1}}</Option>
				</Select>
				</Col>
				<Col span="6" style="width: 20%;">
				<span>科&nbsp;&nbsp;&nbsp;&nbsp;目：</span>
				<Select v-model="subSelect" @on-change="subSelectChange" style="width: 100px;text-align: center;">
					<Option v-for="item in subSelectList" :value="item.value" :key="item.value">{{item.label}}</Option>
				</Select>
				</Col>
				<Col span="6" style="width: 20%;">
				<span>层&nbsp;&nbsp;&nbsp;&nbsp;级：</span>
				<Select v-model="levelSelect" @on-change="levelSelectChange" style="width: 100px;text-align: center;">
					<Option v-for="item in levelSelectList" :value="item.value" :key="item.value">{{item.label}}</Option>
				</Select>
				</Col>
				<div style="display: inline-block;float: right;">
					<Tooltip content="导出" theme="light">
						<Button @click="daochu" icon="iconfont alicon-daochu"></Button>
					</Tooltip>
				</div>
			</Row>
			<div style="min-height: 300px; padding-bottom:20px ;border-bottom: 1px solid #CCCCCC;">
				<Row style="margin:0 auto;margin:20px 45px 5px 45px;color: #666666;border-radius: 10px; background-color: #f0f8ff;padding: 10px 0;">
					<Col span="3" style="text-align: center;width: 15%;">
					<span style="font-size: 16px;">校区</span>
					</Col>
					<Col span="4" style="text-align: center;width: 15%;">
					<span style="font-size: 16px;">教学班</span>
					</Col>
					<Col span="3" style="text-align: center;width: 20%;">
					<span style="font-size: 16px;">姓名</span>
					</Col>
					<Col span="3" style="text-align: center;width: 20%;">
					<span style="font-size: 16px;">学号</span>
					</Col>
					<Col span="3" style="text-align: center;width: 15%;">
					<span style="font-size: 16px;">性别</span>
					</Col>
					<Col span="4" style="text-align: center;width: 15%;">
					<span style="font-size: 16px;">所在行政班</span>
					</Col>

				</Row>
				<Row v-for="item in xzList" :key="item.xzListId" style="margin:0 auto;margin:20px 45px 5px 45px;">
					<Col span="3" style="text-align: center;width: 15%;">
					<span style="font-size: 16px;">{{item.school}}&nbsp;</span>
					</Col>
					<Col span="4" style="text-align: center;width: 15%;">
					<span style="font-size: 16px;">{{item.chiclass}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;width: 20%;">
					<span style="font-size: 16px;">{{item.name}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;width: 20%;">
					<span style="font-size: 16px;">{{item.num}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;width: 15%;">
					<span style="font-size: 16px;">{{item.sex}}&nbsp;</span>
					</Col>
					<Col span="4" style="text-align: center;width: 15%;">
					<span style="font-size: 16px;">{{item.xzclassroom}}&nbsp;</span>
					</Col>

					</Col>
				</Row>
			</div>
			<div style="text-align: center;display: block;margin: 0 45px;">
				<Page :page-size="pageSize" style="display: inline-block;margin: 15px auto; width: 80%; text-align: right;" :current="current" :total="recordCount" @on-change="pageChange" />
				<span style="display: inline-block;float: left;line-height: 32px; padding: 15px 0 15px 45px;">共有{{recordCount}}条记录</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
				current: 1,
				recordCount: 0, //总条数
				pageSize: 10,
				classtype: 1,
				fencengSelect: 4,
				xzclassSelect: 1,
				jiaoxueclassSelect: 1,
				subSelect: 1,
				levelSelect:1,
				levelSelectList:[
				{
					value:1,
					label:"全部",
				},
				{
					value:2,
					label:"A",
				},
				{
					value:3,
					label:"B",
				},
				{
					value:4,
					label:"C",
				},
				{
					value:5,
					label:"D",
				},
				],
				fencengList: [{
						value: 4,
						label: "高一"
					},
					{
						value: 5,
						label: "高二"
					},
					{
						value: 6,
						label: "高三"
					},
				],
				xzclassSelectList: [{
						value: 1,
						label: "全部",
					},
					{
						value: 2,
						label: "1班",
					},
					{
						value: 3,
						label: "2班",
					},
					{
						value: 4,
						label: "3班",
					},
					{
						value: 5,
						label: "4班",
					},
				],
				jiaoxueclassSelectList: [{
						value1: 1,
						label1: "全部",
					},
					{
						value1: 2,
						label1: "A1班",
					},
					{
						value1: 3,
						label1: "A2班",
					},
					{
						value1: 4,
						label1: "B1班",
					},
					{
						value1: 5,
						label1: "B2班",
					},
				],
				subSelectList: [{
						value: 1,
						label: "语文",
					},
					{
						value: 2,
						label: "数学",
					},
					{
						value: 3,
						label: "英语",
					},
					{
						value: 4,
						label: "政治",
					}, {
						value: 5,
						label: "历史",
					},
					{
						value: 6,
						label: "地理",
					},
					{
						value: 7,
						label: "物理",
					},
					{
						value: 8,
						label: "化学",
					},
					{
						value: 9,
						label: "生物",
					},
				],
				classtypeList: [{
					value: 1,
					label: "按行政班",
				}, {
					value: 2,
					label: "按教学班",
				}],
				xzList: [{
						xzListId: 1,
						school: "本校区",
						xzclassroom: "1班",
						name: "丁阳",
						num: "20190101",
						sex: "女",
						chiclass: "A1班",
						mathclass: "A2班",
						engclass: "A1班",
						wuliclass: "A2班",
						huaxueclass: "A1班",
						shengwuclass: "A2班",
						zhengzhiclass: "A1班",
						lishiclass: "A2班",
						diliclass: "A2班",

					},
					{
						xzListId: 2,
						school: "本校区",
						xzclassroom: "2班",
						name: "李淮",
						num: "20190102",
						sex: "男",
						chiclass: "A1班",
						mathclass: "A2班",
						engclass: "A1班",
						wuliclass: "A2班",
						huaxueclass: "A1班",
						shengwuclass: "A2班",
						zhengzhiclass: "A1班",
						lishiclass: "A2班",
						diliclass: "A2班",

					},
					{
						xzListId: 3,
						school: "本校区",
						xzclassroom: "1班",
						name: "游俊",
						num: "20190103",
						sex: "女",
						chiclass: "A1班",
						mathclass: "A2班",
						engclass: "A1班",
						wuliclass: "A2班",
						huaxueclass: "A1班",
						shengwuclass: "A2班",
						zhengzhiclass: "A1班",
						lishiclass: "A2班",
						diliclass: "A2班",

					},
					{
						xzListId: 4,
						school: "本校区",
						xzclassroom: "1班",
						name: "施威",
						num: "20190104",
						sex: "男",
						chiclass: "A1班",
						mathclass: "A2班",
						engclass: "A1班",
						wuliclass: "A2班",
						huaxueclass: "A1班",
						shengwuclass: "A2班",
						zhengzhiclass: "A1班",
						lishiclass: "A2班",
						diliclass: "A2班",

					},
					{
						xzListId: 5,
						school: "本校区",
						xzclassroom: "1班",
						name: "王基英",
						num: "20190105",
						sex: "女",
						chiclass: "A1班",
						mathclass: "A2班",
						engclass: "A1班",
						wuliclass: "A2班",
						huaxueclass: "A1班",
						shengwuclass: "A2班",
						zhengzhiclass: "A1班",
						lishiclass: "A2班",
						diliclass: "A2班",

					},
				]
			}
		},
		created() {

			this.handleListApproveHistory()

		},
		methods: {
			pageChange: function(value) {
				this.xzList = []
				this.current = value;
			},
			handleListApproveHistory: function() {

				// 保存取到的所有数据
				this.ajaxHistoryData = this.xzList
				this.recordCount = this.xzList.length;
				// 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
				if(this.xzList.length < this.pageSize) {
					this.xzList = this.ajaxHistoryData;
				} else {
					this.xzList = this.ajaxHistoryData.slice(0, this.pageSize);
				}

			},
			pageChange: function(index) {
				var _start = (index - 1) * this.pageSize;
				var _end = index * this.pageSize;
				this.xzList = this.ajaxHistoryData.slice(_start, _end);
			},
			fencengselectChange: function() {},
			xzclassSelectChange: function() {},
			jiaoxueclassSelectChange: function() {},
			subSelectChange: function() {},
			classtypeselect: function() {
				//				location.reload()
			},
			daochu: function() {},
			levelSelectChange:function(){},
		}
	}
</script>

<style>

</style>